<template>
  <div>
    <div>
      <Map></Map>
    </div>
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                display: inline-block; float: left; margin-left: 12%; margin-top: 30px; width: 24%">
      <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);font-family: 楷体; font-size: 25px; margin-bottom: 15px;">景点热搜top10</div>
      <el-table
          :data="scenicHotRank"
          style="width: 100%;"
          :row-class-name="tableRowClassName"
      >
        <el-table-column
            prop="top"
            label="排名"
            align="center"
            width="100px">
        </el-table-column>
        <el-table-column
            prop="name"
            label="景点"
            show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
            prop="hot"
            label="搜索次数"
            align="center">
        </el-table-column>
        <el-table-column
            v-if="false"
            prop="id"
            label="">
        </el-table-column>
      </el-table>
    </div>

    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
              display: inline-block; float: right; margin-right: 12%; margin-top: 30px; width: 50%">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
               active-text-color="#ff9d00"
                >
        <el-menu-item index="1">附近景点</el-menu-item>
        <el-menu-item index="2">热门攻略</el-menu-item>
        <el-menu-item index="3" style="float: right; border: 1px solid black; border-radius: 4px;
                                        background-color: #ff9d00; color: white; height: 40px; line-height: 40px;
                                         margin-right: 10px; margin-top: 10px">
          <i class="el-icon-edit" style="color: white"></i> 写游记
        </el-menu-item>

      </el-menu>
      <div class="line"></div>

      <div v-show="scenicOrArticle == 0">
        <div style="height: 15px"></div>
        <!--        <ul>-->
        <!--          <li v-for="item in articles">-->
        <!--            <ArticleComponent :article="item"></ArticleComponent>-->
        <!--          </li>-->
        <!--        </ul>-->
        <ArticleComponent :article="article"></ArticleComponent>
        <ArticleComponent :article="article2"></ArticleComponent>
        <ArticleComponent :article="article3"></ArticleComponent>
        <ArticleComponent :article="article"></ArticleComponent>
        <ArticleComponent :article="article2"></ArticleComponent>
        <ArticleComponent :article="article3"></ArticleComponent>
        <ArticleComponent :article="article"></ArticleComponent>
        <ArticleComponent :article="article2"></ArticleComponent>
        <ArticleComponent :article="article2"></ArticleComponent>
        <div v-show="isPublish">
          <ArticleComponent :article="publishArticle"></ArticleComponent>
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 12]"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
            style="margin-top: 20px; margin-bottom: 10px"
        >
        </el-pagination>
      </div>
      <div v-show="scenicOrArticle == 1">
        <div style="height: 15px"></div>
        <div v-show="page == 1">
          <ScenicComponent :scenic="scenic"></ScenicComponent>
          <ScenicComponent :scenic="scenic2"></ScenicComponent>
          <ScenicComponent :scenic="scenic3"></ScenicComponent>
          <ScenicComponent :scenic="scenic"></ScenicComponent>
          <ScenicComponent :scenic="scenic2"></ScenicComponent>
          <ScenicComponent :scenic="scenic3"></ScenicComponent>
          <ScenicComponent :scenic="scenic"></ScenicComponent>
          <ScenicComponent :scenic="scenic2"></ScenicComponent>
          <ScenicComponent :scenic="scenic3"></ScenicComponent>
          <ScenicComponent :scenic="scenic"></ScenicComponent>
        </div>
        <div v-show="page == 2">
          <ScenicComponent :scenic="scenic2"></ScenicComponent>
          <ScenicComponent :scenic="scenic3"></ScenicComponent>
          <ScenicComponent :scenic="scenic"></ScenicComponent>
        </div>


        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 12]"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="13"
            style="margin-top: 20px; margin-bottom: 10px"
        >
        </el-pagination>
      </div>
    </div>

  </div>

</template>

<script>
import Map from "@/components/Map/Map";
import ArticleComponent from "@/components/Article/ArticleComponent";
import ScenicComponent from "@/components/Scenic/ScenicComponent";

export default {
  name: 'Home',
  components: {
    Map,
    ScenicComponent,
    ArticleComponent,
  },
  data(){
    return{
      isPublish: false,
      nickName: "",
      total: 0,
      page: 1,
      pageSize: 10,
      scenicHotRank: [
        {top: 1, name: "武汉", id: "11223213", hot: "560万"},
        {top: 2,name: "上海", id: "22222222", hot: "360万"},
        {top: 3,name: "上海2", id: "32222222",hot: "260万"},
        {top: 4,name: "上海3", id: "42222222",hot: "160万"},
        {top: 5,name: "珠穆朗玛峰之武汉市北京天安门广场", id: "52222222",hot: "60万"},
        {top: 6,name: "武汉", id: "11223213", hot: "560万"},
        {top: 7,name: "上海", id: "22222222", hot: "360万"},
        {top: 8,name: "上海2", id: "32222222",hot: "260万"},
        {top: 9,name: "上海3", id: "42222222",hot: "160万"},
        {top: 10,name: "Mamungkukumpurangkuntjunya", id: "52222222",hot: "60万"},
      ],
      // 0 表示显示文章 1 表示显示景点
      scenicOrArticle: 1,
      article: {},
      article2: {},
      article3: {},
      scenic: {
        id: 111,
        title: "武汉",
        coverImage: "https://tr-osdcp.qunarzz.com/tr-osd-tr-manager/img/04991d3e31a8d1299f26fb2ff9905d46.jpg",
        content: "武汉市，简称“汉”，别称江城，中国超大城市和国家中心城市之一，湖北省省会、副省级城市，中国中部暨长江中游地区第一大城市，也是中部地区的政治、经济、金融、商业、物流、科技、文化、教育中心及交通、通信枢纽，国家历史文化名城，有“九省通衢”的美誉。\n" +
            "\n" +
            "武汉是中国经济地理中心，中国三大“内河航运中心”之一，也是中国客运量最大的铁路枢纽和航空、公路枢纽之一。\n" +
            "\n" +
            "“黄金水道”长江及其最大支流汉水横贯市区，将武汉一分为三，形成了武昌、汉口、汉阳三块区域隔江鼎立的格局，史上统称之为“武汉三镇”。\n" +
            "\n" +
            "清中后期至民国，武汉经济发达，是仅次于上海的中国第二大国际大都市，繁荣程度位居亚洲前列，被称为“东方芝加哥”，而武汉也继承了这一美称。",
        likesNumber: 12138
      },
      scenic2: {
        id: 111,
        title: "上海",
        coverImage: "https://ts1.cn.mm.bing.net/th/id/R-C.a4a6e3e24aaab9cdfb00b397a5af84af?rik=tUK4gptRynVbCg&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50058%2f8691.jpg_wh1200.jpg&ehk=7kUPikJYNsolqMGy7ZNWYpdDe%2b%2b0EUmbDoE43NvvuMA%3d&risl=&pid=ImgRaw&r=0",
        content: "上海位于我国大陆海岸线中部的长江口，拥有中国最大的工业基地、最大的外贸港口。有超过2000万人居住和生活在上海地区，其中大部分属汉族江浙民系，通行吴语上海话。\n" +
            "\n" +
            "    昔日的上海，只是一个以渔业和棉纺织手工业为营的小镇。19世纪，由于上海良好的港口位置使其开始崭露锋芒。1842年《南京条约》签订后，上海成为中国开放对外通商口岸之一，并很快因成为东西方贸易交流的中心而迅速发展。至20世纪30年代，上海成为跨国公司开展贸易和商务的枢纽，是亚太地区最繁华的商业中心，被誉为“东方巴黎”。但在1949年建国之后，外国人几乎全部离开了上海，上海随即没落。改革开放后的90年代起，上海又开始重现往日的繁华，成为了今日中国大陆最大的经济中心和全球最大的贸易港口。\n" +
            "\n" +
            "    上海也是一座新兴的旅游目的地，具有深厚的近代城市文化底蕴和众多的历史古迹，如上海的地标——浦西的外滩和新天地。但在一江之隔的浦东，却呈现出另一番繁华景象：东方明珠广播电视塔与金茂大厦、上海环球金融中心等建筑共同组成了全球最壮丽的天际线之一，而2014年将建成的上海中心，更会为“东方巴黎”添上灿烂的一笔。\n" +
            "\n" +
            "    今日的上海，不仅是中国重要的科技、贸易、金融和信息中心，更是一个世界文化荟萃之地。上海已经发展成为一个国际化大都市。并致力于建设成为国际金融中心和航运中心。",
        likesNumber: 12138
      },
      scenic3: {
        id: 111,
        title: "北京",
        coverImage: "https://img1.qunarzz.com/travel/d8/1704/3d/edfa46d0ad0e39b5.jpg",
        content: "北京，简称“京”，古称燕京、北平，中华人民共和国首都、省级行政区、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心\n" +
            "\n" +
            "北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，中心位置东经116°20′、北纬39°56′，是世界著名古都和现代化国际城市，也是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会常务委员会的办公所在地。\n" +
            "\n" +
            "北京地势西北高、东南低。西部、北部和东北部三面环山，东南部是一片缓缓向渤海倾斜的平原。境内流经的主要河流有：永定河、潮白河、北运河、拒马河等，多由西北部山地发源，穿过崇山峻岭，向东南蜿蜒流经平原地区，最后分别汇入渤海。北京的气候为典型的暖温带半湿润大陆性季风气候，夏季高温多雨，冬季寒冷干燥，春、秋短促。",
        likesNumber: 12138
      },
      articles: []
    }
  },
  methods:{
    load: function () {
      this.nickName = localStorage.getItem("nickName")
      var requestBody = {
        "currPage" : this.page,
        "pageSize" : this.pageSize,
        "sidx" : "likes_number",
        "order" : "asc"
      }
      axios.post("/article/article/list", requestBody).then(res => {
        console.log(res.data)
        this.total = res.data.page.totalCount;
        this.articles = res.data.page.list;
      })
    },
    handleSizeChange: function (pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange: function (page) {
      this.page = page;
      this.load();
    },

    chooseSceinc: function (){
      this.scenicOrArticle = 0;
    },
    chooseArticle: function (){
      this.scenicOrArticle = 1;
    },
    // 不能变色？ 之后修bug
    tableRowClassName({row, rowIndex}) {
      // console.log(row, rowIndex)
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 2) {
        return 'success-row';
      }
      return '';
    },
    handleSelect(key, keyPath) {
      // 选择附近景点 / 热门景点
      if (key == 1){
        this.scenicOrArticle = 1;
      }
      if (key == 2){
        this.scenicOrArticle = 0;
      }
      if (key == 3){
        this.$router.push('/publish')
      }
    },
  },
  mounted() {
    // this.load()
    // alert(localStorage.getItem("nickName"))
    this.nickName = localStorage.getItem("nickName")
    this.total = 9 + (localStorage.getItem("article") == null ? 0 : 1)
    this.isPublish = localStorage.getItem('article') != null ? true : false
    var publish = localStorage.getItem('article')
    this.publishArticle = JSON.parse(publish)
    console.log(this.publishArticle)

    this.article = {
      id: 123,
      title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
      coverImage: "https://p1-q.mafengwo.net/s19/M00/AA/AE/CoNHGWPwYIRhHU70AAegN6c766k.jpeg?imageMogr2%2Fstrip",
      avatar: "https://p.qqan.com/up/2021-6/16246735796128385.png",
      userName: this.nickName,
      content: "北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
          "\n" +
          "2\n" +
          "汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
          "\n" +
          "3\n" +
          "故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。",
      updateTime: "2023-2-24 14:30",
      likesNumber: 12138,
      tags: ["前端", "后端", "运维"]
    }
    this.article2 = {
      id: 123,
      title: "【南京】春日漫游记｜六朝金粉地 金陵帝王州",
      coverImage: "https://p1-q.mafengwo.net/s19/M00/26/0C/CoNJOmQJh0AW7iP6AAaxh7a6Fao.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
      avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
      userName: "张扬很帅",
      content: "序：是南京！也是金陵！\n" +
          "2023年的第一场旅行，这也是疫情放开后的第一场旅行。旅行的目的地选择了 南京 ，这已经是第二次来 南京 了。\n" +
          "\n" +
          "在我的印象中， 南京 一直是一个浪漫的城市。可能是因为那一句“一句梧桐美，种满 南京 城。”，让我对 南京 念念不忘。\n" +
          "\n" +
          "南京 既受益又罹祸于其得天独厚的地理位置和气度不凡的风水佳境，过去曾多次遭受兵燹之灾，但亦屡屡从瓦砾荒烟中重整繁华。",
      updateTime: "2023-2-24 14:30",
      likesNumber: 12138,
      tags: ["前端"]
    }
    this.article3 = {
      id: 123,
      title: "春日拾光，自启东来，来一次江风海韵的自驾游",
      coverImage: "https://note.mafengwo.net/img/c8/2c/ed87feab1e3243d0a9cac81c5f17aebc.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
      avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
      userName: "张扬很帅",
      content: "“江海明珠”启东\n" +
          "春天，是沉寂了整个冬季之后的苏醒。在这春暖花开的时节里，伴着和煦的光照，唤醒人们敏感的肌体与神经。又到了出行的日子，准备放慢脚步，感受春季的魅力，所以我选择了一次自驾周边游。\n" +
          "\n" +
          "说起 启东 可能很多人并不陌生， 江苏 省辖县级市， 南通 市代管，位于 江苏 省的东南端，长江入 海口 北岸，集黄金海岸与黄金水道于一身，江海岸线178千米，可利用深水海岸线30公里，中深水长江海岸线20公里 。南濒长江入 海口 北支，其 中东 段以江心为界，西段 永隆 沙与 上海 市崇明区接攘，崇启大桥与 上海 崇明岛相连；东、北濒临黄海，西与 海门 区毗邻。我对这里的印象更加深刻一些，在 南通 这座城市生活和工作了将近5年，所以对于 启东 一点都不陌生，可以说很多青春的记忆都留存在这座滨海历史文化名城。",
      updateTime: "2023-2-24 14:30",
      likesNumber: 12138,
      tags: []
    }

  }
}
</script>

<style scoped>
.el-table--small {
  font-size: 16px;
}
.el-dropdown-menu__item, .el-menu-item {
  font-size: 18px;
  padding: 0 20px;
  cursor: pointer;
}
</style>